import React from "react";
import classNames from "../utils/classNames";

type position = "x" | "y";

export class SpaceType {
  size? = 4 as number | string;
  children: React.ReactNode;
  position? = "x" as position;
  style?: React.CSSProperties;
  className?: string;
}

const Space: React.FC<SpaceType> = (props) => {
  const { position, size, style, className } = props;

  const clazz = `space-${position}-${size}`;
  const clazzName = classNames(clazz, className);
  return (
    <div className={clazzName} style={style}>
      {props.children}
    </div>
  );
};

Space.defaultProps = new SpaceType();
export default Space;
